<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row class="ml10"
              v-show="showSearch">
        <el-form :inline="true"
                 :model="state.queryForm"
                 @keyup.enter="getDataList"
                 ref="queryRef">
          <el-form-item :label="$t('serivesVo.name')"
                        prop="name">
            <el-input :placeholder="$t('serivesVo.name')"
                      v-model="state.queryForm.name" />
          </el-form-item>
          <el-form-item :label="$t('serivesVo.groupName')"
                        prop="groupName">
            <el-input :placeholder="$t('serivesVo.groupName')"
                      v-model="state.queryForm.groupName" />
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList"
                       icon="Search"
                       type="primary">{{ $t('common.queryBtn') }} </el-button>
            <el-button @click="resetQuery"
                       icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-table :data="state.dataList"
                @selection-change="handleSelectionChange"
                v-loading="state.loading"
                border
                :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle">
        <el-table-column align="center"
                         type="selection"
                         width="40" />
        <el-table-column :label="$t('serivesVo.index')"
                         type="index"
                         width="60" />
        <el-table-column :label="$t('serivesVo.name')"
                         prop="name"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('serivesVo.groupName')"
                         prop="groupName"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('serivesVo.clusterCount')"
                         prop="clusterCount"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('serivesVo.ipCount')"
                         prop="ipCount"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('serivesVo.healthyInstanceCount')"
                         prop="healthyInstanceCount"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('serivesVo.triggerFlag')"
                         prop="triggerFlag"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('common.action')"
                         width="160"
                         fixed="right">
          <template #default="scope">
            <el-button icon="view"
                       @click="serviceDetailRef.openDialog(scope.row)"
                       size="small"
                       text
                       type="primary">
              {{ $t('common.detailBtn') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination @current-change="currentChangeHandle"
                  @size-change="sizeChangeHandle"
                  v-bind="state.pagination"> </pagination>
      <service-detail ref="serviceDetailRef"></service-detail>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { pageList } from '/@/api/services/services';
import { useI18n } from 'vue-i18n';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
const serviceDetail = defineAsyncComponent(() => import('./detail.vue'));

const serviceDetailRef = ref();

const { service_type } = useDict('service_type');
const { t } = useI18n();

// 定义变量内容
const queryRef = ref();
const showSearch = ref(true);

// 多选rows
const selectObjs = ref([]) as any;
// 是否可以多选
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		name: '',
		groupName: '',
	},
	pageList: pageList,
});
//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	queryRef.value?.resetFields();
	getDataList();
};

// 多选事件
const handleSelectionChange = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};
</script>

<style lang="scss" scoped>
pre code.hljs {
	width: 65%;
}
</style>
